<template>
  <div class="login">
    <div class="login-bg"></div>
    <div class="login-box">
      <div class="login-lang">
        <el-dropdown trigger="click" @command="changeLang">
          <c-icon name="earth"></c-icon>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh_CN">中文</el-dropdown-item>
            <el-dropdown-item command="en_US">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="login-logo"></div>
      <div class="login-title">
        <span>{{ multLang('title_asset_u') }}</span>
      </div>
      <div class="login-form">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item prop="user" :error="error.user">
            <el-input
              v-model="form.user"
              :placeholder="multLang('title_jq')"
              @keyup.enter.native="submitForm"
            >
              <c-icon
                class="login-form-icon"
                slot="prefix"
                name="user"
              ></c-icon>
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd" :error="error.pwd">
            <el-input
              :type="visibles.isShowPWD ? 'text' : 'password'"
              v-model="form.pwd"
              :placeholder="multLang('title_aah_f')"
              @keyup.enter.native="submitForm"
            >
              <c-icon
                class="login-form-icon"
                slot="prefix"
                name="lock"
              ></c-icon>
              <div
                class="login-form-pwd-switch"
                slot="suffix"
                @click="visibles.isShowPWD = !visibles.isShowPWD"
              >
                <c-icon
                  class="login-form-icon"
                  :name="visibles.isShowPWD ? 'eye' : 'eye-close'"
                ></c-icon>
              </div>
            </el-input>
          </el-form-item>
          <el-form-item>
            <c-row :col="6">
              <c-col>
                <el-button type="text">
                  {{ multLang('title_gd') }}
                </el-button>
              </c-col>
              <c-col right>
                <el-button type="text">
                  {{ multLang('title_aaw_b') }}
                </el-button>
              </c-col>
            </c-row>
          </el-form-item>
          <el-form-item>
            <el-popover
              placement="top"
              width="276"
              trigger="manual"
              v-model="visibles.isSelCompany"
              popper-class="popover-login"
            >
              <c-row :col="6">
                <c-col>
                  <span class="popover-login-title">
                    {{ multLang('title_dw') }}
                  </span>
                </c-col>
                <c-col right>
                  <c-icon
                    class="popover-login-close"
                    name="close"
                    @click="visibles.isSelCompany = false"
                  ></c-icon>
                </c-col>
              </c-row>
              <template v-for="(company, i) in companies">
                <template v-if="i">
                  <el-divider :key="i"></el-divider>
                </template>
                <el-button
                  class="popover-login-btn"
                  type="text"
                  :key="i"
                  @click="login(company.id)"
                >
                  <c-icon name="home"></c-icon>
                  {{ company.company_name }}
                </el-button>
              </template>
              <el-button
                class="login-form-btn"
                slot="reference"
                type="primary"
                @click="submitForm"
              >
                {{ multLang('title_baab_w') }}
              </el-button>
            </el-popover>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
import { login, getCompanyData, getToken } from '@api/login'
// import { changeLang } from '@api/lang'
import { Routes } from '@vue/router/routes'
import { encrypt } from '@/util/crypto'
import { toRoute } from '@/util/router'
import { clearLoginInfo } from '@/util/login'
export default {
  name: 'PLogin',
  components: {},
  props: {},
  data() {
    return {
      companies: [],
      visibles: {
        isShowPWD: false,
        isSelCompany: false
      },
      error: {
        user: '',
        pwd: ''
      },
      form: {
        user: '',
        pwd: ''
      }
    }
  },
  computed: {
    ...mapState({
      lang: state => state.lang.lang
    }),
    rules() {
      return {
        user: {
          required: true,
          message: this.tplLang('msg_a', ['title_jq']),
          trigger: 'blur'
        },
        pwd: {
          required: true,
          message: this.tplLang('msg_a', ['title_aah_f']),
          trigger: 'blur'
        }
      }
    }
  },
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    ...mapActions({
      setToken: 'login/setToken',
      setOnline: 'login/setOnline',
      setLang: 'lang/setLang',
      setLangs: 'lang/setLangs',
      setMenus: 'menu/setMenus'
    }),
    changeLang(cmd) {
      this.setLang(cmd)
    },
    triggerSubmitError(visible) {
      if (visible) {
        this.error.user = ' '
        this.error.pwd = ' '
      } else {
        this.error.user = ''
        this.error.pwd = ''
      }
    },
    triggerSelCompany(visible = false) {
      this.visibles.isSelCompany = visible
    },
    login(c_id) {
      login({ c_id })
        .then(() => {
          this.setMenus()
            .then(() => {
              this.triggerSelCompany()
              toRoute(Routes.Admin)
            })
            .catch(() => {
              clearLoginInfo()
            })
        })
        .catch(() => {
          clearLoginInfo()
        })
    },
    getCompanyData() {
      getCompanyData()
        .then(({ data }) => {
          if (data && data.length) {
            if (data.length === 1) {
              this.login(data[0].id)
            } else {
              this.companies = data
              this.triggerSelCompany(true)
            }
          }
        })
        .catch(() => {
          clearLoginInfo()
        })
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { user, pwd } = this.form
          const u = encrypt(user)
          const p = encrypt(pwd)
          getToken({ u, p }).then(({ data }) => {
            if (data) {
              //登录信息
              this.setOnline(true)
              this.setToken(data)
              this.getCompanyData()
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>
<style lang="scss">
.popover-login {
  &-title,
  &-close {
    font-size: 14px;
  }
  &-title {
    display: inline-block;
    margin-bottom: 8px;
  }
  &-close {
    cursor: pointer;
  }
  .el-divider {
    margin: 1px 0;
  }
  &-btn {
    width: 100%;
    position: relative;
    text-align: left;
    &::after {
      content: '\e856';

      font-family: 'iconfont';
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;

      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;

      position: absolute;
      right: 0;
    }
  }
}
@include login {
  position: relative;
  &-bg {
    @include wh;
    @include img(
      (
        url: 'bg.jpg'
      )
    );
  }
  &-box {
    @include wh(400px, 360px, true);
    box-sizing: border-box;
    padding: 0 50px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    box-shadow: 0px 0px 10px #99ccff;
  }
  &-lang {
    @include wh(30px, 30px);
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    transition: all 0.3s;
    text-align: center;
    line-height: 30px;
    &:hover {
      i {
        color: #666;
      }
    }
    i {
      font-size: 30px;
      color: #333;
    }
  }
  &-logo {
    height: 100px;
    @include img(
      (
        url: 'logo.png',
        size: contain
      )
    );
  }
  &-title {
    height: 50px;
    text-align: center;
    span {
      font-weight: bold;
      font-size: 22px;
      color: #333;
    }
  }
  &-form {
    &-btn {
      display: block;
      width: 100%;
    }
    &-icon {
      font-size: 16px;
      vertical-align: middle;
    }
    &-pwd-switch {
      cursor: pointer;
      color: #333;
    }
  }
}
</style>
